<template>
	<view class="">
		<view class="overlay" ></view>
		
		<view class="selectchess">
			<view class="chess_header" >
						选择协会
					</view>
					<view class="chess_content" >
					
					<view >
						<picker-view  :indicator-style="indicatorStyle" indicator-class='cell_selected' :value="index" @change="bindPickerChange">
							<picker-view-column style="min-height:150rpx ;">
								<view class="item" v-for="(item,index) in pickArray" :key="index">{{item.org_name}}</view>
							 </picker-view-column>
						</picker-view>
					
					</view>
					
					</view>
					<view class="chess_footer" @tap.stop="selected()">
						<button type="primary" class="btns">确定</button>
					</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				indicatorStyle:"height:"+Math.round(uni.getSystemInfoSync().screenWidth/(750/100))+"px;color:#333;",
				index:[0],
				value:0
			}
		},
		props:{
			pickArray:{
				type:Array,
				default:[]
			}
		},
		mounted() {

		},
		methods:{
			bindPickerChange(e){
				var _this=this;
				this.$nextTick(() => {
					_this.value=e.detail.value[0]
				})
			},
			selected(){
				var _this=this;
				setTimeout(function(){
						_this.$emit("selected",_this.value)
				},1000)
			}
		}
	}
</script>

<style lang="less" scoped>
	.overlay{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		opacity: 0.7;
		background:rgba(0,0,0,0.4);
	}
	.selectchess{
		width: 100%;
		min-height: 200rpx;
		background: #fff;
		opacity: 1;
		position: fixed;
		left: 0;
		bottom: 0;
		font-size: 28rpx;
		z-index: 100;
		border-radius: 8rpx;
	}
 .chess_header{
		text-align: center;
		padding:20rpx;
		border-bottom: 2rpx solid #f1f1f1;
		font-size: 32rpx;
		font-weight: bold;
	}
	.chess_title{
		padding: 30rpx 20rpx 30rpx;
	}
	.chess_content{
		padding: 20rpx;
	}
	.item{
		font-size: 28rpx;
		line-height: 100rpx;
		// padding: 10rpx 0;
		// color: #aaa;
		height: 100rpx !important;
		overflow: auto !important;
		text-align: center;
	}
	.cell_selected{
		color: #333 !important;
	}
	.chess_footer{
		display: flex;
		height: 98rpx;
		flex-direction: column;
		justify-content: center;
		border-top: 2rpx solid #F1F1F2;
		.btns{
			width: 80%;
			height: 64rpx;
			line-height: 64rpx;
			background: #1A66FF;
			border-radius: 44rpx;
		}
	}
	.blue{
		color: #2680EB;
	}
	.red{
		color:#f78989 ;
	}
	.footer{
		position: absolute;
		bottom: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		.btns{
			width: 80%;
			text-align: center;
			font-size: 28rpx;
		}
		.btns:first-child{
			border: 2rpx solid #2D8DFF;
			color: #2D8DFF;
		}
		.btns:last-child{
			background:  #2D8DFF;
			color: #fff;
		}
		.fblue{
			border-top: 2rpx solid #f1f1f1;
			color:#2680EB ;
		}
		.lblue{
			background: #2680EB;
			color: #fff;
		}
		.fred{
			border-top: 2rpx solid #f1f1f1;
			color:#f78989 ;
		}
		.lred{
			background: #f78989;
			color: #fff;
		}
	}
</style>
